<template>
  <div class="effect-sort-wrapper">
   <el-card class="card-top">
      <div slot="header" class="clearfix">
        <span>数据统计范围 {{topInfo.startTime}} 至 {{topInfo.endTime}}  共<span style="color:#4B7EFE">{{topInfo.days}}天</span></span>
      </div>
      <div class="info">
        <span>油站排序位置: <span style="font-size:18px;color:#4B7EFE">{{topInfo.customLocation}}</span></span>
      </div>
    </el-card>
    <div class="card-box card-top card g-flex-sa">
      <div class="data-box g-flex-sa">
        <card title="油站曝光次数" unit="次" width="45%" :num="exposureInfo.gasShowNum" back='linear-gradient(225deg, #81A5FF 0%, #4B7EFE 100%)' :img="imgLeft"/>
        <card title="油站访问次数" unit="次" width="45%" :num="exposureInfo.gasDetailNum" back='linear-gradient(225deg, #B7C5DC 0%, #8394B3 100%)' :img="imgRight"/>
        <div class="info-tips">
          <el-tooltip placement="bottom" effect="light">
            <div slot="content">
              <span style="color:#000;line-height: 1.5;">数据展示截止到前一天的数据统计（不包括当天）</span><br/>
              <span style="color:#666;line-height: 1.5;">
                油站曝光次数：活动统计期内油站列表页可被用户查看的次数<br/>
                油站访问次数：活动统计期内油站详情页可被用户查看的次数<br/>
                注：该数据统计以天维度计算
              </span>
            </div>
            <img class="icon-question" :src="imgIcon">
          </el-tooltip>
        </div>
      </div>
      <div class="data-box g-flex-sa">
        <sort-item title="用户" :label="['新客数','老客数']" :value="[totalInfo.newUserNum,totalInfo.oldUserNum]" unit="人"></sort-item>
        <sort-item title="订单量" :label="['新客单量','老客单量']" :value="[totalInfo.newOrderNum,totalInfo.oldOrderNum]" unit="单"></sort-item>
        <sort-item title="营业额" :label="['新客营业额','老客营业额']" :value="[totalInfo.newUserAmount,totalInfo.oldUserAmount]" unit="元"></sort-item>
        <sort-item title="升数" :label="['新客升数','老客升数']" :value="[totalInfo.newOilLiter,totalInfo.oldOilLiter]" unit="升"></sort-item>
        <div class="info-tips">
          <el-tooltip placement="bottom" effect="light">
             <div slot="content">
              <span style="color:#000;line-height: 1.5;">数据统计为实时统计（包括当天数据）</span><br/>
              <span style="color:#666;line-height: 1.5;">
                新客用户：活动统计期内首次到油站交易的用户<br/>
                老客用户：活动统计期内2次及以上到油站交易过的用户
              </span>
            </div>
            <img class="icon-question" :src="imgIcon">
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="card-box">
      <div class="g-flex-sa chart-box">
        <chart-bar chartId="bar1" titleText="用户" 
          :legendData="['新客数','老客数']"
          :xData="xChartData"
          :seriesData="chartData1"
          class="chart-box-item"></chart-bar>
        <chart-bar chartId="bar2" titleText="订单量" 
          :legendData="['新客单量','老客单量']" 
          :xData="xChartData"
          :seriesData="chartData2"
          class="chart-box-item"></chart-bar>
      </div>
      <div class="g-flex-sa chart-box">
        <chart-bar chartId="bar3" titleText="营业额" 
          :legendData="['新客营业额','老客营业额']" 
          :xData="xChartData"
          :seriesData="chartData3"
          class="chart-box-item"></chart-bar>
        <chart-bar chartId="bar4" titleText="升数" 
          :legendData="['新客升数','老客升数']" 
          :xData="xChartData"
          :seriesData="chartData4"
          class="chart-box-item"></chart-bar>
      </div>
    </div>
  </div>  
</template>
<script>
import {ossUrl} from '@/utils/config'
import card from './components/driverCard'
import SortItem from './components/SortItem'
import ChartBar from './echart/SortLine'
import { getSortEffectShowApi, getSortEffectSumApi, getSortEffectDayApi, getSortEffectInfoApi } from '@/api/marketShop'
import chartMix from './mixins/sortChart'

export default { 
  mixins: [chartMix],
  components: {
    card,
    SortItem,
    ChartBar
  }, 
  data () {
    return {
      imgLeft:`${ossUrl}market/effect-eye.png`,
      imgRight:`${ossUrl}market/effect-gas.png`,
      imgIcon:`${ossUrl}market/market-icon-question.png`,
      topInfo: {},
      exposureInfo: {},
      totalInfo: {},
      allEchartsInfo: {},
      activeId: '',
      startTime:'',
      endTime:''
    }
  },
  created(){
    this.initPage()
  },
  methods: {
    initPage(){
      this.activeId = this.$route.query.activeId
      this.getTotalData(this.activeId)
      this.getActiveInfo(this.activeId)
      this.getExposureData(this.activeId)
    },
    //获取活动基本信息
    async getActiveInfo(activeId){
      try{
        const { code, result } = await getSortEffectInfoApi({activeId})
        if( code !== 200 ) return
        this.topInfo = result
        this.startTime = result.startTime
        this.endTime = result.endTime
      }catch(e){
        console.log(e)
      }finally{
        this.getDailyData(this.activeId)
      }
    },
    //获取曝光数据  
    async getExposureData(activeId){
      try{
        const { code, result } = await getSortEffectShowApi({activeId})
        if( code !== 200 ) return
        this.exposureInfo = result
      }catch(e){
        console.log(e)
      }
    },
    //获取活动统计数据(中部右边数据)
    async getTotalData(activeId){
      try{
        const { code, result } = await getSortEffectSumApi({activeId})
        if( code !== 200 ) return
        this.totalInfo = result
      }catch(e){
        console.log(e)
      }
    },
    //获取每日数据（echarts）
    async getDailyData(activeId){
      try{
        const { code, result } = await getSortEffectDayApi({activeId})
        if( code !== 200 ) return
        this.allEchartsInfo = result
        this.initEchartData(this.allEchartsInfo,this.startTime,this.endTime)
      }catch(e){
        console.log(e)
      }
    },
  }
}
</script>
<style lang="less" scoped>
.effect-sort-wrapper{
  .card-top {
    margin-top: 10px;
  }
  .card-box{
    width: 100%;
    margin: 10px 0;
  }
  .card{
    width:100%;
    height: 160px;
    >:nth-child(1){
      margin-right: 10px;
    }
    >:nth-child(2){
      margin-left: 10px;
    }
  }
  .icon-question{
    width: 21px;
    height: 21px;
  }
  .data-box{
    width: 50%;
    height: 100%;
    background: #ffffff;
    border-radius: 5px;
    position: relative;
    padding: 0 20px;
    .info-tips{
      width: 21px;
      height: 21px;
      position: absolute;
      top: 10px;
      right: 10px;
    }
  }
  .chart-box{
    >:nth-child(1){
      margin-right: 10px;
    }
    >:nth-child(2){
      margin-left: 10px;
    }
    margin-bottom: 10px;
    .chart-box-item{
      width: 100%;
      background: #ffffff;
    }
  }
}
</style>